<script setup lang="ts">
import { ref, watch, watchEffect, watchPostEffect, watchSyncEffect } from "vue";
const count = ref(18);
//初次不更新
watch(
  () => count.value,
  (newValue, oldValue) => {
    console.log("watch", newValue, oldValue);
  }
);
//初次更新
watch(
  () => count.value,
  (newValue, oldValue) => {
    console.log("watchImmediate", newValue, oldValue);
  },
  { immediate: true }
);
//等同于watch中的immediate:true
watchEffect(() => {
  console.log(count.value);
});
//等同于watch中的flush:post在DOM更新之后执行，onbeforeUpdate后
watchEffect(
  () => {
    console.log(count.value);
  },
  { flush: "post" }
);
watchPostEffect(() => {
  console.log(count.value);
});

//等同于watch中的flush:sync在DOM更新之前执行，onbeforeUpdate前
watchSyncEffect(() => {
  console.log(count.value);
});
</script>

<template>
  <div class="reactive-wrap">
    <h1>Watch</h1>
    <h3 @click="count++">Add</h3>
  </div>
</template>
<style>
h1 {
  text-align: center;
}
h3 {
  text-align: center;
}
</style>
